<template>
    <el-row>
        <page-header title="文章编辑" />
        <page-main>
            <el-form ref="editFormRef" :label-position="labelPosition" :rules="editFormRules" label-width="100px" :model="editArticleForm">
                <el-form-item label="文章标题：" prop="title">
                    <el-input v-model="editArticleForm.title" placeholder="请输入文章标题" />
                </el-form-item>
                <el-form-item label="文章作者：" prop="name">
                    <el-input v-model="editArticleForm.name" disabled placeholder="请输入文章作者" />
                </el-form-item>
                <el-form-item label="文章封面：">
                    <image-upload :url.sync="image" action="#" name="image" :width="250" :height="150" :data="{'token':'TKD628431923530324'}" @on-success="handleSuccess" />
                </el-form-item>
                <el-form-item label="文章类别：" prop="category">
                    <el-select v-model="editArticleForm.category" clearable placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"                            
                        />
                    </el-select>
                </el-form-item>                              
                <el-form-item label="文章内容：" prop="content">
                    <editor v-model="editArticleForm.content" />
                </el-form-item>                              
            </el-form>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" @click="editArticleFormSubmit(true)">发布</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
        </fixed-action-bar>
    </el-row>
</template>

<script>
import {update} from '@/api/articles'

export default {
    data() {
        return {
            // 表单文本的对齐方式
            labelPosition: 'left', 
            // 编辑表单内容
            editArticleForm: {},
            // 文章封面
            image: '../../assets/images/sample.jpg',
            // 文章类别
            options: [{
                value: '分类1',
                label: '黄金糕'
            }, {
                value: '分类2',
                label: '双皮奶'
            }, {
                value: '分类3',
                label: '蚵仔煎'
            }, {
                value: '分类4',
                label: '龙须面'
            }, {
                value: '分类5',
                label: '北京烤鸭'
            }],            
            editFormRules: {
                title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' }
                ],
                category: [
                    { required: true, message: '请选择文章分类', trigger: 'change' }
                ],                
                content: [
                    { required: true, message: '请输入文章内容', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.editArticleForm = this.$route.query
    },
    methods: {
        /**
         * @description: 发表文章或存为草稿
         * @param {*}
         * @return {*}
         * @author: Yu
         */        
        editArticleFormSubmit(flag) {
            this.$refs.editFormRef.validate(async valid => {
                if (!valid) return
                this.editArticleForm.status = flag
                this.editArticleForm.datatime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss')                
                const res = await update(this.editArticleForm)
                this.$message.success(res.message)
                this.$router.push({name: 'ArticleManagerList'})
            })
        },

        /**
         * @description: 文章封面上传 
         * @param {*} res
         * @return {*}
         * @author: Yu
         */        
        handleSuccess(res) {
            if (res.error == '') {
                this.image = res.data.path
            } else {
                this.$message.warning(res.error)
            }
        }
    }
}
</script>
